{% include account_nav %}
<div class="container_wrapper account_addresses_default" id="account_addresses">

    <h1 class="title">{{lang.account.default.address | upcase }}</h1>
    {% assign length = account_address.addresses | size %}
    {% if length %}
    <div class="address-box">
        {% for item in account_address.addresses %}
        <div class="address-item">
            <div class="address-item-warp">
                <div class="address-item-cell">{{ item.first_name }} {{ item.last_name }}</div>
                <div class="address-item-cell">{{ item.company }}</div>
                <div class="address-item-cell">{{ item.address1 }}</div>
                <div class="address-item-cell">{{ item.address2 }}</div>
                <div class="address-item-cell">{{item.area}} {{ item.city }} {{ item.province }} {{ item.zip }} </div>
                <div class="address-item-cell">{{ item.country_name }}</div>
                <div class="address-item-cell">{%- if item.tel_area_code and storeConfig.checkout_form_address_phone == 1 -%}+{{ item.tel_area_code | telAreaCodeShow }}&nbsp;{%- endif -%}{{ item.phone }}</div>
                {% if item.default == 1 %}
                <div class="address-item-tag"><span>{% include icon_account_default ,{width:'16',height:'16'} %}</span></div>
                {% endif %}

                <div class="address-handle">
                    <a class="address-handle-item" href="/checkouts/addaddress?address_id={{ item.id }}">
                        <span>{{lang.account.address.edit_address}}</span>
                        {% include icon_edit %}
                    </a>
                    <div class="address-handle-item address-del" data-id='{{item.id}}'>
                        <span>{{lang.account.address.remove}}</span>
                        {% include icon_delete ,{width:'16',height:'16'} %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}

        
    </div>
    <div class="addaddress_btn"><a href="/checkouts/addaddress" class="main_btn">{{lang.account.address.empty_btn_text}}</a></div>
    {% else %}

    {% include empty ,{href:'/checkouts/addaddress',text:lang.account.address.empty,btnText:lang.account.address.empty_btn_text,icon:'address',isBtn:true } %}

    {% endif %}


    <div class="back-box">
        <a href="/account">
            <!-- {% include icon_account_back , width:'32',height:'28' %} -->
            <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
            <span>{{lang.account.default.account}}</span>
        </a>
    </div>

</div>

<script type="text/javascript">
    console.log({{account_address.addresses|json}})
    $('.address-del').click(function () {
        const id = $(this).data('id');
        moi.confirm({
            title: `{{lang.account.address.del_text}}`,
            ok: function () {
                moi.del('/account/addresses/' + id, {}, {
                    success: function (data) {
                        location.reload();
                    }
                })
            }
        })
    })
</script>